<template>
	<view class="login">
		<!-- 标语区域 -->
		<view class="slogan">
			<text>您好</text>
			<text>加入享+，让生活更轻松</text>
		</view>

		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" ref="uForm" :model="form" :rules="rules">
			<u-form-item prop="mobile" borderBottom ref="item1">
				<u--input v-model="form.mobile" placeholder-style="color:#979797" placeholder="请输入手机号" border="none">
				</u--input>
				<block slot="right">
					<u-count-down @finish="onFinish" v-if="isShowCountDown" :time="6 * 1000" format="ss s">
					</u-count-down>
					<view v-else @click="getCode" class="code-btn">获取验证码</view>
				</block>
			</u-form-item>
			<u-form-item prop="code" borderBottom ref="item1">
				<u--input maxlength="6" v-model="form.code" placeholder-style="color:#979797" placeholder="请输入6位验证码"
					border="none">
				</u--input>
			</u-form-item>
		</u--form>

		<view class="tip">未注册手机号经验证后将自动注册</view>

		<life-button @click="onLogin" bgColor="#5591AF" color="#fff" icon="../../static/icon/login.png">
			登录
		</life-button>

		<!-- 模拟短信提示 -->
		<u-notify @click.native="copyCode" ref="uNotify"></u-notify>
	</view>
</template>

<script>
	import {
		sendCode,
		login
	} from '@/api/login.js'
	export default {
		data() {
			return {
				form: {
					mobile: '18900000000',
					code: ''
				},
				code: '',
				isShowCountDown: false,
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
							message: '手机号码格式不正确',
							trigger: ['change', 'blur'],
						}
					],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}, {
						pattern: /^\d{6}$/,
						message: '验证码格式不正确',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		methods: {
			getCode() {
				// 校验手机号
				this.$refs.uForm.validateField('mobile', async (errRes) => {
					if (errRes.length) return
					// 手机号合法，发请求
					const res = await sendCode(this.form.mobile)
					// message
					const message = `【享+生活】验证码：${res.data.code}.您正在使用短信验证码功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏。`
					this.code = res.data.code
					// 短信提示
					this.$refs.uNotify.show({
						top: 10,
						type: 'success',
						message: message,
						duration: 1000 * 6,
						fontSize: 14
					})
					// 震动
					uni.vibrateLong()
					// 显示倒计时
					this.isShowCountDown = true
				})
			},
			// 复制
			copyCode() {
				uni.setClipboardData({
					data: this.code
				})
			},
			// 倒计时结束
			onFinish() {
				this.isShowCountDown = false
			},
			// 点击登录
			async onLogin() {
				try {
					await this.$refs.uForm.validate()
					const res = await login(this.form)
					// console.log(res.data)
					this.$store.commit('user/setUserToken', res.data)
					uni.setStorageSync('userToken', res.data)
					uni.switchTab({
						url: "/pages/my/my"
					})
				} catch (err) {
					console.log(err)
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		padding: 0 30rpx;

		.slogan {
			padding: 50rpx 0;
			display: flex;
			flex-direction: column;

			text:nth-child(1) {
				color: #333333;
				font-weight: medium;
				font-size: 48rpx;
				line-height: 72rpx;
				letter-spacing: 0rpx;
				text-align: left;
			}

			text:nth-child(2) {
				color: #333333;
				font-weight: regular;
				font-size: 30rpx;
				line-height: 1.5;
				letter-spacing: 0rpx;
			}
		}

		::v-deep .u-form {
			margin-top: 22rpx;

			.code-btn {
				color: #5591AF;
				font-size: 28rpx;
			}

			.u-form-item {
				.u-form-item__body {
					height: 103rpx;
					padding: 0;
				}

				.u-form-item__body__right__message {
					margin-left: 0 !important;
					// margin-top: -30rpx;
				}
			}
		}



		.tip {
			color: #C3C3C5;
			font-size: 26rpx;
			line-height: 40rpx;
			margin-top: 30rpx;
		}
	}
</style>
